﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <title>Beetlex samples</title>

</head>
<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control input-sm" v-model="none.data.name">
                    </div>
                    <button type="button" class="btn btn-default btn-sm" @click="none.get()">None Queue</button>
                </form>
                <p v-for="item in noneItems">{{item}}

                </p>
            </div>
            <hr />
            <div class="row">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control input-sm" v-model="single.data.name">
                    </div>
                    <button type="button" class="btn btn-default btn-sm" @click="single.get()">Single Queue</button>
                </form>
                <p v-for="item in singleItmes">
                    {{item}}
                </p>
            </div>
            <hr />
            <div class="row">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control input-sm" v-model="multiple.data.name">
                    </div>
                    <button type="button" class="btn btn-default btn-sm" @click="multiple.get()">Multiple Queue</button>
                </form>
                <p v-for="item in multipleItems">
                    {{item}}
                </p>
            </div>

            <hr />

            <div class="row">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control input-sm" v-model="unique.data.name">
                    </div>
                    <button type="button" class="btn btn-default btn-sm" @click="unique.get()">Unique Queue</button>
                </form>
                <p v-for="item in uniqueItems">
                    {{item}}
                </p>
            </div>

        </div>
    </div>
    <script>

        var none = new beetlexAction("/NoneQueue", { name: '' });
        none.requested = function (r) {
            page.noneItems.push(r);
        };
        var single = new beetlexAction("/SingleQueue", { name: '' });
        single.requested = function (r) {
            page.singleItmes.push(r);
        };
        var multiple = new beetlexAction("/MultipleQueue", { name: '' });
        multiple.requested = function (r) {
            page.multipleItems.push(r);
        };
        var unique = new beetlexAction("/UniqueQueue", { name: '' });
        unique.requested = function (r) {
            page.uniqueItems.push(r);
        };
        var model = {
            noneItems:[],
            none: none,
            single: single,
            singleItmes:[],
            multiple: multiple,
            multipleItems:[],
            unique: unique,
            uniqueItems:[],
        };

        var page = new Vue({
            el: '#page',
            data: model,
            methods: {

            }
        });

    </script>
</body>

</html>